import { 
	useState, 
	useImperativeHandle, 
	forwardRef,
	useEffect 
} from 'react';

import {
	Modal,message,
} from 'antd';

import {useModel} from 'umi';

import './previewModal.less';

import Loading from '@/pages/Drag/sub-components/previewModal/Loading';
import PreviewForm from './previewForm';
import checkFormValidator from './checkFormValidator';

type PropsType = {
	formData:any;
	formEvent:any;
}

function PreviewModal(props: PropsType, ref: any) {

	const [showLoading,setLoding] = useState(false);
	const [isModalVisible, setIsModalVisible] = useState(false);
	const [formData,setFormData] = useState<any>([]);
	const [formEvents,setFormEvents] = useState<any>();


	const Drag = useModel('drag');

	useImperativeHandle(ref, () => ({
		showModal: () => {
			setIsModalVisible(true);
			setFormData([...props.formData]);
			setFormEvents(props.formEvent);
		}
	}))

	const handleCancel = () => {
		setIsModalVisible(false);
		
		formData.forEach((item:any) =>{
			item.value = '';
		})
		// console.log('handleCancel',formData)
		setFormData([...formData]);
	};

	async function submit(reqParams:any){
	
		// reqParams.startDate = moment(reqParams.startDate).format("YYYY-MM-DD")
		// reqParams.endDate = moment(reqParams.endDate).format("YYYY-MM-DD")

		const checkForm = checkFormValidator(Drag.config.validators,formData);
		console.log({checkForm})
		if(!checkForm)return;

		console.log('reqParams:',reqParams)

		


		// console.log('submit',res);
	}

	return (
		<Modal
			title="预览"
			visible={isModalVisible}
			footer={null}
			onCancel={handleCancel}
			width={1100}
			destroyOnClose={true}
			className="previewModal"
		>
			
			<PreviewForm 
				formData={formData}
				setFormData={(data:any[])=>{setFormData(data)}}
				onPreviewFormSubmit={submit}
				rules={Drag.config.fieldShowRules}
				formEvents={formEvents}
			/>

			{showLoading && <Loading />}
		</Modal>
	)
}

export default forwardRef(PreviewModal);